<template>
  <div class="c2cTrade">
    <normal-head :title="title" />
    <div class="w-full px-33 box-border relative tabBackground pb-20">
      <div class="flex pt-34 box-border items-center">
        <span class="text-grey font-26 mr-20">{{ $t("单价") }}</span>
        <span class="text-green font-26 mr-35">{{ currencySymbol }} {{ detail.symbol_value }}</span>
        <!-- <span class="text-green font-26 mr-35">{{ currency.currency_symbol }} {{ detail.symbol_value }}</span> -->
        <img @click="refresh" class="w-24 h-24" src="~@/assets/image/otc/buy/vector_1.png" alt=""
          style="transition: all ease 0.5s" />
      </div>
      <div class="flex mt-22 box-border items-center">
        <span class="text-grey font-26 mr-20">{{ $t("限额") }}</span>
        <!-- <span class="text-black font-26 mr-35">{{currencySymbol}} {{detail.investment_min}} - {{currencySymbol}} {{detail.investment_max}}</span> -->
        <span class="c2cColor font-26 mr-35">{{ currencySymbol }} {{ detail.investment_min }} -
          {{ currencySymbol }} {{ detail.investment_max }}</span>
      </div>
      <slot name="trade"></slot>
      <div class="h-80 px-32 mt-40 flex items-center rounded-lg tips c2cTipBackground">
        <img class="w-28 h-28 mr-18" src="~@/assets/image/c2c/Group41.png" alt="" />
        <p class="font-28 textColor">
          {{ $t("保护资产安全，请提高防范意识！") }}
        </p>
      </div>
    </div>
    <div class="px-40 pb-40 mt-31 border-bottom-1px c2cColor">
      <div class="">
        <h2 class="font-28 font-400">{{ $t("交易信息") }}</h2>
        <div class="flex justify-between mt-40">
          <span class="text-grey">{{ $t("付款时限") }}</span>
          <span>{{ detail.expire_time }} {{ $t("分钟") }}</span>
        </div>
        <div class="flex justify-between mt-40">
          <span class="text-grey">{{ detail.direction == 'buy' ? $t("卖家昵称") : $t("买家昵称") }}</span>
          <div>
            <span class="mr-24">{{ detail.nick_name }}</span>
            <van-icon class="font-700 text-grey" name="arrow" />
          </div>
        </div>
        <div class="flex justify-between mt-40">
          <span class="text-grey">{{ $t("交易方式") }}</span>
          <div class="h-56 tabBackground rounded-md">
            <template v-if="detail.direction === 'buy'">
              <van-popover class="w-full h-full" placement="left-end" :theme="$store.state.home.theme"
                v-model="showPopover" trigger="click" :actions="payList" @select="onSelect">
                <template #reference>
                  <div class="flex justify-center items-center w-full h-full">
                    <div class="w-6 h-28 border-ra" style="background: #e7bb41"></div>
                    <span v-if="detail.direction === 'sell'" class="ml-12 mr-16">{{ fullMethodName }}</span>
                    <span v-else class="ml-12 mr-16">{{ methodName }}</span>
                    <img class="w-28 h-28" :src="require('@/assets/image/c2c/Group1504.png')" alt="" />
                  </div>
                </template>
              </van-popover>
            </template>
            <template v-else>
              <div class="pl-10">
                {{ detail.pay_type_name && detail.pay_type_name.replaceAll(',', ' | ') }}
                <!-- <span v-for="item in payList" :key="item.id" class="mr-10">{{item.methodName }}</span> -->
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="px-32">
      <slot name="desc"></slot>
    </div>
  </div>
</template>

<script>
import NormalHead from "@/components/normal-head";
import { DropdownMenu, DropdownItem, Popover } from "vant";
import { mapGetters } from "vuex";
import { Icon, Divider } from "vant";
import { mapState } from "vuex";
import otcApi from "@/API/otc";

export default {
  name: "C2cTrade",
  props: {
    title: {},
    type: {},
    cid: {},
    bankCarNumber: {},
    detail: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      num: 0, // 刷新按钮点击
      payList: [],
      payType: "", // 支付id 买
      methodName: "", // 支付方式 买
      showPopover: false,
      fullMethodName: ''
    };

  },
  computed: {
    ...mapGetters(['theme'])
  },
  created() {
    // 支付方式
    // this.detail.pay_type.split(',').map((item, index) => {
    //   const text = this.detail.pay_type_name.split(',')[index]
    //   if (index === 0) {
    //     this.payType = item;
    //     this.methodName = text
    //   }
    //   this.payList.push({
    //     value: item,
    //     text
    //   })
    // })
    // let { reciveType } = this.$route.query
    // if (reciveType) {
    //   reciveType = JSON.parse(reciveType)
    //   this.fullMethodName = '111'
    //   console.log('reciveType', reciveType)
    // }
    if (this.detail.direction === "buy") {
      otcApi.ctcPaymentMethodPayList({ id: this.detail.id, language: this.$i18n.locale }).then((res) => {
        console.log("res", res);
        res.data.map((item) => {
          this.payList.push({
            value: item.id,
            text: item.methodName,
          });
        });
        this.payType = this.payList[0].value;
        this.methodName = this.payList[0].text;
      });
    } else {
      console.log(this.detail.id)
      otcApi.ctcPaymentMethodUserPay({ id: this.detail.id, language: this.$i18n.locale }).then(res => {
        this.payList = res.data
        this.payList.map(item => {
          item.text = item.methodName
          item.value = item.id
        })
        this.payType = this.payList[0].value;
        this.methodName = this.payList[0].text;
      })
    }

    otcApi.c2cGetPayCurrencyList().then(res => {
      console.log(res.data);
    })

  },
  watch: {
    payType(val) {
      this.$emit("payType", val);
    },
  },
  methods: {
    // 刷新点击
    refresh(e) {
      this.num++;
      e.target.style.transform = `rotateZ(-${this.num * 360}deg)`;
      this.$emit("refresh");
    },
    onSelect(action) {
      this.payType = action.value;
      this.methodName = action.text;
    },
  },
  computed: {
    ...mapState("home", ["currency"]),
    ...mapGetters("c2c", ["direction", "currencySymbol"]),
    // fullMethodName() {
    //   if (this.paymentMethodName) {
    //     return this.paymentMethodName;
    //   } else {
    //     return "请选择";
    //   }
    // },
  },
  components: {
    [Icon.name]: Icon,
    [Divider.name]: Divider,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Popover.name]: Popover,
    NormalHead,
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/mixin.scss";

.c2cTrade {
  ::v-deep .van-icon {
    font-size: 16px;
  }

  ::v-deep .van-button {
    border-radius: 10px;
    background: #2EBD85;
  }
}

.border-bottom-1px {
  position: relative;

  &:after {
    @include border-1px("bottom");
  }
}
</style>
